import React, { useState, useEffect } from 'react'
import { useLocation, useParams } from 'react-router-dom'
import ReactMarkdown from 'react-markdown'
import MarkNav from 'markdown-navbar'
import { Row, Col, Breadcrumb,Card,Affix } from 'antd';
import { HomeOutlined, GithubOutlined } from '@ant-design/icons';


import BusCard from '../../components/business_card/business_card'
import Advertise from '../../components/advertise/advertise'
import './passage_detail.less'

import {reqReadPsg} from '../../api/index'

const PassageDe = () => {

  //文章
  const [passage, setPassage] = useState('');
  const {passageID} = useParams()
  

  
  //初始化执行获取
  useEffect(() => {
    //定位到页面顶部 
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    //发送请求获取文章
    async function getPsg(passageID){
    let result =await reqReadPsg(passageID)
    setPassage(result.data)
    }
    getPsg(passageID)
    console.log("哈哈哈哈哈")
    
  }, [passageID]);
 
  //const loc = useLocation()


  
  return (
    <Row>
      <Col xs={{ span: 22, offset: 1 }} lg={{ span: 14, offset: 2 }} className='col'>
        <Breadcrumb>
          <Breadcrumb.Item href='/'>
            <HomeOutlined style={{ fontSize: '1.2rem', marginTop: '.8rem', marginLeft: '.8rem' }} />
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <GithubOutlined style={{ fontSize: '1.2rem', marginTop: '.8rem', marginLeft: '.8rem' }} />
          </Breadcrumb.Item>
        </Breadcrumb>


        <div style={{ padding: '.8rem' }}>
          <ReactMarkdown >{passage.context}
          </ReactMarkdown>
        </div>
      </Col>

      

      <Col xs={{ span: 0 }} lg={{ span: 5, offset: 1 }} className='col col2'>
        {
          //个人信息页和广告位
        }
        <BusCard />
        <Advertise />
        <Affix offsetTop={0}>
          <Card title="文章目录" bordered={false}  className='passage-context'>
            {
              <MarkNav source={passage.context} ordered={false} className='context-info'/>
            }
          </Card>
        </Affix>
      </Col>
    </Row>
  )
}

export default PassageDe 